<template>
  <view class="equipment-container" @click="handleContainerClick">
    <!-- 设备统计卡片 -->
    <view class="stats-section">
      <view class="stats-card">
        <!-- 第一行 -->
        <view class="stats-row">
          <view class="stats-item">
            <text class="stats-number total">{{ totalDevices }}</text>
            <text class="stats-label">总设备数</text>
          </view>
          <view class="stats-item">
            <text class="stats-number online">{{ onlineDevices }}</text>
            <text class="stats-label">在线设备</text>
          </view>
          <view class="stats-item">
            <text class="stats-number offline">{{ offlineDevices }}</text>
            <text class="stats-label">闲置设备</text>
          </view>
          <view class="stats-item">
            <text class="stats-number alarm">{{ alarmDevices }}</text>
            <text class="stats-label">待检修设备</text>
          </view>
        </view>
        <!-- 第二行 -->
        <view class="stats-row">
          <view class="stats-item">
            <text class="stats-number pending">{{ pendingDevices }}</text>
            <text class="stats-label">待报废设备</text>
          </view>
          <view class="stats-item">
            <text class="stats-number scrapped">{{ scrappedDevices }}</text>
            <text class="stats-label">已报废设备</text>
          </view>
          <view class="stats-item">
            <text class="stats-number repairing">{{ repairingDevices }}</text>
            <text class="stats-label">维修中设备</text>
          </view>
          <view class="stats-item">
            <!-- 预留位置，可以添加其他统计项 -->
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索筛选 -->
    <uni-section title="搜索筛选" type="line"></uni-section>
    <view class="search-section">
      <view class="search-row">
        <view class="search-item">
          <!-- <text class="search-label">设备类型</text> -->
          <picker :range="typeOptions" range-key="label" @change="onTypeChange">
            <view class="picker-display" :class="{ placeholder: selectedTypeIndex < 0 }">{{ selectedTypeLabel }}</view>
          </picker>
        </view>
        <view class="search-item">
          <!-- <text class="search-label">设备状态</text> -->
          <view class="location-input" :class="{ focused: statusFocused }">
            <uni-icons type="list" size="20" color="#999"></uni-icons>
            <picker :range="statusOptions" range-key="label" :value="selectedStatusIndex" @change="onStatusChange">
              <view class="search-input inner" :class="{ placeholder: selectedStatusIndex < 0 }">{{ selectedStatusLabel
              }}
              </view>
            </picker>
            <uni-icons v-if="selectedStatusIndex >= 0" type="closeempty" size="18" color="#bbb"
              @click="clearStatus"></uni-icons>
          </view>
        </view>
      </view>
      <view class="search-row">
        <view class="search-item full">
          <!-- <text class="search-label">设备所在地</text> -->
          <view class="location-input" :class="{ focused: locationFocused }">
            <uni-icons type="location" size="20" color="#999"></uni-icons>
            <input class="search-input inner" type="text" v-model="search.location" placeholder="请输入所在地"
              placeholder-class="placeholder" @focus="locationFocused = true" @blur="locationFocused = false"
              @input="handleSearch" />
            <uni-icons v-if="search.location" type="closeempty" size="18" color="#bbb"
              @click="clearLocation"></uni-icons>
          </view>
        </view>
      </view>
      <view class="search-row">
        <view class="search-item">
          <view class="input-with-icon" :class="{ focused: nameFocused }">
            <uni-icons type="compose" size="20" color="#999"></uni-icons>
            <input class="search-input inner" type="text" v-model="search.equipmentName" placeholder="请输入设备名称"
              placeholder-class="placeholder" @focus="nameFocused = true" @blur="nameFocused = false"
              @input="handleSearch" />
            <uni-icons v-if="search.equipmentName" type="closeempty" size="18" color="#bbb"
              @click="clearDeviceName"></uni-icons>
          </view>
        </view>
        <view class="search-item">
          <view class="input-with-icon" :class="{ focused: codeFocused }">
            <uni-icons type="barcode" size="20" color="#999"></uni-icons>
            <input class="search-input inner" type="text" v-model="search.equipmentCode" placeholder="请输入设备编号"
              placeholder-class="placeholder" @focus="codeFocused = true" @blur="codeFocused = false"
              @input="handleSearch" />
            <uni-icons v-if="search.equipmentCode" type="closeempty" size="18" color="#bbb"
              @click="clearEquipmentCode"></uni-icons>
          </view>
        </view>
      </view>
      <view v-if="hasPermi('equipment:main:add')" class="search-actions">
        <button class="search-btn add" @click="handleAdd">新增</button>
      </view>
    </view>

    <!-- 设备列表 -->
    <view class="section-header">
      <uni-section title="设备列表" type="line"></uni-section>
      <view class="total-display">
        <text class="total-text">共 {{ total }} 台设备</text>
      </view>
    </view>
    <view class="equipment-list">
      <view class="device-item" v-for="device in equipmentList" :key="device.id" @click="viewDevice(device)">
        <!-- 左侧设备图标 -->
        <view class="device-icon">
          <uni-icons type="gear" size="40" color="#007AFF"></uni-icons>
        </view>

        <!-- 右侧设备信息容器 -->
        <view class="device-content">
          <!-- 第一行：设备名称和状态 -->
          <view class="device-row">
            <text class="device-name">{{ device.equipmentName || device.name }}</text>
            <text class="device-status"
              :class="[statusClassMap[device.status] || statusClassMap[String(device.status)] || 'status-unknown']">{{
                getStatusText(device.status) }}</text>
          </view>

          <!-- 第二行：设备类型和设备编号 -->
          <view class="device-row">
            <text class="device-type">设备类型：{{ getTypeText(device.equipmentTypeId) }}</text>
            <text class="device-code">设备编号：{{ device.equipmentCode || device.code }}</text>
          </view>

          <!-- 第三行：设备型号和设备所在地 -->
          <view class="device-row">
            <text class="device-model">型号：{{ device.model || '未知型号' }}</text>
            <text class="device-location">设备所在地：{{ device.location || '未知位置' }}</text>
          </view>

          <!-- 第四行：操作按钮 -->
          <view class="device-actions">
            <view class="more-icon" @click.stop="toggleActionMenu(device)">
              <uni-icons type="more-filled" size="30"></uni-icons>
            </view>
            <button class="action-btn primary" @click="viewDevice(device)">详情</button>
          </view>
          <!-- 动作弹出菜单（卡片右上） -->
          <view v-if="actionMenuVisibleId === device.id" class="action-menu" @click.stop>
            <view v-if="hasPermi('equipment:main:remove')" class="action-menu-item"
              @click="handleAction('delete', device)">删除</view>
            <view v-if="hasPermi('equipment:main:repairHistory')" class="action-menu-item"
              @click="handleAction('repair', device)">维修</view>
            <view v-if="hasPermi('equipment:main:edit')" class="action-menu-item" @click="handleAction('edit', device)">
              修改</view>
            <view v-if="hasPermi('equipment:main:transferRecords')" class="action-menu-item"
              @click="handleAction('transfer', device)">调拨</view>
          </view>
        </view>
      </view>
      <view v-if="equipmentList.length === 0" class="empty-state">
        <text class="empty-text">暂无设备数据</text>
      </view>
    </view>

    <!-- 分页控制 -->
    <view class="pagination-container" v-if="equipmentList.length > 0">
      <!-- 分页信息 -->
      <view class="pagination-info">
        <text class="pagination-text">
          第 {{ pageNum }} 页，共 {{ Math.ceil(total / pageSize) }} 页，显示 {{ equipmentList.length }} / {{ total }} 条
        </text>
      </view>

      <!-- 分页按钮 -->
      <view class="pagination-buttons" v-if="Math.ceil(total / pageSize) > 1">
        <button class="page-btn prev-btn" :class="{ disabled: pageNum <= 1 }" :disabled="pageNum <= 1"
          @click="goToPage(pageNum - 1)">
          <uni-icons type="arrowleft" size="16" color="currentColor"></uni-icons>
          <text>上一页</text>
        </button>

        <view class="page-numbers">
          <button v-for="page in getPageNumbers()" :key="page" class="page-number"
            :class="{ active: page === pageNum, ellipsis: page === '...' }" :disabled="page === '...'"
            @click="page !== '...' && goToPage(page)">
            {{ page }}
          </button>
        </view>

        <button class="page-btn next-btn" :class="{ disabled: pageNum >= Math.ceil(total / pageSize) }"
          :disabled="pageNum >= Math.ceil(total / pageSize)" @click="goToPage(pageNum + 1)">
          <text>下一页</text>
          <uni-icons type="arrowright" size="16" color="currentColor"></uni-icons>
        </button>
      </view>
    </view>
    <!-- 打开动作菜单时的全屏透明遮罩 -->
    <view v-if="actionMenuVisibleId !== null" class="action-menu-mask" @click="closeAllMenus"></view>
  </view>
</template>

<script>
import { countEquipment, listEquipmentTypes, listEquipment } from '@/api/equipment/main'
import { getDicts } from '@/api/system/dict/data'
export default {
  data() {
    return {
      // 设备统计数据
      totalDevices: 156,
      onlineDevices: 142,
      offlineDevices: 14,
      alarmDevices: 8,
      pendingDevices: 3,
      scrappedDevices: 2,
      repairingDevices: 5,

      // 设备列表
      equipmentList: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,

      // 搜索筛选
      typeOptions: [],
      statusOptions: [
        { label: '全部状态', value: '' },
        { label: '在线', value: 'online' },
        { label: '离线', value: 'offline' },
        { label: '告警', value: 'alarm' },
        { label: '维修中', value: 'repairing' },
        { label: '已报废', value: 'scrapped' }
      ],
      selectedTypeIndex: -1,
      selectedStatusIndex: -1,
      search: {
        equipmentTypeId: '',
        status: '',
        location: '',
        equipmentName: '',
        equipmentCode: ''
      },
      locationFocused: false,
      nameFocused: false,
      codeFocused: false,
      statusFocused: false
      ,
      // 状态值->样式类映射（避免模板中调用方法）
      statusClassMap: {
        1: 'status-green',
        '1': 'status-green',
        2: 'status-blue',
        '2': 'status-blue',
        3: 'status-orange',
        '3': 'status-orange',
        4: 'status-red',
        '4': 'status-red',
        5: 'status-orange',
        '5': 'status-orange',
        6: 'status-red',
        '6': 'status-red'
      },
      // 当前显示动作菜单的设备ID
      actionMenuVisibleId: null
    }
  },
  computed: {
    selectedTypeLabel() {
      return this.selectedTypeIndex < 0 ? '请选择设备类型' : (this.typeOptions[this.selectedTypeIndex]?.label || '请选择设备类型')
    },
    selectedStatusLabel() {
      return this.selectedStatusIndex < 0 ? '请选择设备状态' : (this.statusOptions[this.selectedStatusIndex]?.label || '请选择设备状态')
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1
    }
  },
  async onLoad() {
    this.fetchCounts()
    this.fetchStatusOptions()
    // 先获取设备类型，再获取设备列表
    await this.fetchTypeOptions()
    this.fetchEquipmentList()
  },
  onShow() {
    // 返回后如果新增成功，触发刷新
    let flag = null
    try { flag = uni.getStorageSync('refresh_equipment_list') } catch (e) { }
    if (flag) {
      try { uni.removeStorageSync('refresh_equipment_list') } catch (e) { }
      // 确保设备类型已加载且有值，再触发搜索
      if (Array.isArray(this.typeOptions) && this.typeOptions.length > 0) {
        if (!this.search.equipmentTypeId) {
          // 没有值则取第一个
          this.selectedTypeIndex = 0
          this.search.equipmentTypeId = this.typeOptions[0].value
        }
        this.handleSearch()
      } else {
        // 若类型未就绪，先拉取类型再搜索
        this.fetchTypeOptions().then(() => {
          if (Array.isArray(this.typeOptions) && this.typeOptions.length > 0) {
            if (!this.search.equipmentTypeId) {
              this.selectedTypeIndex = 0
              this.search.equipmentTypeId = this.typeOptions[0].value
            }
            this.handleSearch()
          }
        })
      }
    }
  },
  onHide() {
    // 页面隐藏时关闭所有弹出菜单
    this.closeAllMenus()
  },
  methods: {
    async confirmAndDelete(device) {
      if (!device || !device.id) return
      // 二次确认
      uni.showModal({
        title: '确认删除',
        content: `确定删除设备“${device.equipmentName || device.name || ''}”吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '删除中...' })
              const { deleteEquipment } = await import('@/api/equipment/main')
              await deleteEquipment(device.id)
              uni.hideLoading()
              uni.showToast({ title: '删除成功', icon: 'success' })
              // 删除后刷新列表（保持当前筛选与页码，若当前页为空再回退一页）
              this.fetchEquipmentList()
            } catch (e) {
              uni.hideLoading()
              uni.showToast({ title: '删除失败', icon: 'none' })
            }
          }
        }
      })
    },
    async fetchTypeOptions() {
      try {
        const res = await listEquipmentTypes()
        const list = (res && res.rows) ? res.rows : res
        const mapped = (Array.isArray(list) ? list : []).map(item => ({
          label: item.typeName,
          value: item.id
        }))
        this.typeOptions = mapped
        // console.log(2,this.typeOptions)
        if (mapped.length > 0) {
          this.selectedTypeIndex = 0
          // 设置默认的设备类型ID
          this.search.equipmentTypeId = mapped[0].value
          console.log('设置默认设备类型ID:', this.search.equipmentTypeId)
        }
      } catch (e) {
        // 静默失败，保留默认选项
      }
    },
    async fetchStatusOptions() {
      try {
        const res = await getDicts('equipment_status')
        const list = (res && res.data) ? res.data : res
        const mapped = (Array.isArray(list) ? list : []).map(item => ({
          label: item.dictLabel,
          value: item.dictValue
        }))
        if (mapped.length) {
          this.statusOptions = mapped
        }
      } catch (e) {
        // 保留现有硬编码选项作为兜底
      }
    },
    // 选择器变更
    onTypeChange(e) {
      this.selectedTypeIndex = Number(e.detail.value)
      this.search.equipmentTypeId = this.typeOptions[this.selectedTypeIndex]?.value || ''
      // 切换设备类型时重新获取列表
      this.pageNum = 1
      this.fetchEquipmentList()
    },
    onStatusChange(e) {
      this.selectedStatusIndex = Number(e.detail.value)
      this.search.status = this.statusOptions[this.selectedStatusIndex]?.value || ''
      this.statusFocused = false
      this.pageNum = 1
      this.fetchEquipmentList()
    },
    // 触发搜索
    handleSearch() {
      this.pageNum = 1
      this.fetchEquipmentList()
      uni.showToast({ title: '已应用筛选', icon: 'none' })
    },
    // 重置筛选
    handleReset() {
      this.selectedTypeIndex = -1
      this.selectedStatusIndex = -1
      this.search = {
        equipmentTypeId: '',
        status: '',
        location: '',
        equipmentName: '',
        equipmentCode: ''
      }
      this.nameFocused = false
      this.codeFocused = false
      this.pageNum = 1
      this.fetchEquipmentList()
    },
    // 新增设备
    handleAdd() {
      uni.navigateTo({
        url: '/pages/work/equipment/add'
      })
    },
    clearDeviceName() {
      this.search.equipmentName = ''
      this.handleSearch()
    },
    clearEquipmentCode() {
      this.search.equipmentCode = ''
      this.handleSearch()
    },
    clearLocation() {
      this.search.location = ''
      this.handleSearch()
    },
    clearStatus() {
      this.selectedStatusIndex = -1
      this.search.status = ''
      this.statusFocused = false
      this.handleSearch()
    },
    // 拉取设备统计数据
    async fetchCounts() {
      try {
        const res = await countEquipment()
        const data = res && res.data ? res.data : res
        this.totalDevices = data[0]
        this.onlineDevices = data[1]
        this.offlineDevices = data[2]
        this.alarmDevices = data[3]
        this.pendingDevices = data[6]
        this.scrappedDevices = data[4]
        this.repairingDevices = data[5]
      } catch (e) {
        // 静默失败，由全局拦截器提示
      }
    },
    // 获取设备列表
    async fetchEquipmentList() {
      if (this.loading) return

      this.loading = true
      try {
        // 优先使用 search.equipmentTypeId，如果没有则从选中的类型中获取
        const equipmentTypeId = this.search.equipmentTypeId || (this.selectedTypeIndex >= 0 ? this.typeOptions[this.selectedTypeIndex]?.value : '') || ''
        console.log('获取设备列表时的equipmentTypeId:', equipmentTypeId, 'search.equipmentTypeId:', this.search.equipmentTypeId, 'selectedTypeIndex:', this.selectedTypeIndex)
        const status = this.selectedStatusIndex < 0 ? (this.search.status || '') : (this.statusOptions[this.selectedStatusIndex]?.value || '')
        const location = (this.search.location || '').trim()
        const name = (this.search.equipmentName || '').trim()
        const code = (this.search.equipmentCode || '').trim()

        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          equipmentTypeId: equipmentTypeId || undefined,
          status: status || undefined,
          location: location || undefined,
          equipmentName: name || undefined,
          equipmentCode: code || undefined
        }

        // 移除空值参数
        Object.keys(params).forEach(key => {
          if (params[key] === undefined || params[key] === '') {
            delete params[key]
          }
        })
        const res = await listEquipment(params)
        const data = res && res.rows ? res.rows : (res && res.data ? res.data : [])
        const total = res && res.total ? res.total : 0

        // 分页模式：直接替换数据，不追加
        this.equipmentList = data
        this.total = total
      } catch (e) {
        console.error('获取设备列表失败:', e)
        this.equipmentList = []
      } finally {
        this.loading = false
      }
    },
    // 导航到指定页面
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    // 添加设备
    addDevice() {
      uni.showToast({
        title: '添加设备功能',
        icon: 'none'
      })
    },

    // 扫描设备
    scanDevice() {
      uni.showToast({
        title: '扫描设备功能',
        icon: 'none'
      })
    },

    // 导出数据
    exportData() {
      uni.showToast({
        title: '导出数据功能',
        icon: 'none'
      })
    },

    // 查看设备详情
    viewDevice(device) {
      uni.navigateTo({
        url: `/pages/work/equipment/detail?id=${device.id}`
      })
    },

    // 编辑设备
    editDevice(device) {
      uni.navigateTo({
        url: `/pages/work/equipment/edit?id=${device.id}`
      })
    },

    // 切换弹出菜单显示
    toggleActionMenu(device) {
      this.actionMenuVisibleId = this.actionMenuVisibleId === device.id ? null : device.id
    },

    // 处理容器点击事件，关闭弹出菜单
    handleContainerClick(e) {
      // 如果点击的不是弹出菜单或更多按钮，则关闭菜单
      if (this.actionMenuVisibleId !== null) {
        // 检查点击的目标是否是弹出菜单或其子元素
        const target = e.target
        const isMenuClick = target && (
          target.classList.contains('action-menu') ||
          target.classList.contains('action-menu-item') ||
          target.closest('.action-menu')
        )

        // 检查点击的目标是否是更多按钮
        const isMoreButtonClick = target && (
          target.classList.contains('more-icon') ||
          target.closest('.more-icon')
        )

        // 如果既不是菜单点击也不是更多按钮点击，则关闭菜单
        if (!isMenuClick && !isMoreButtonClick) {
          this.actionMenuVisibleId = null
        }
      }
    },

    // 关闭所有弹出菜单
    closeAllMenus() {
      this.actionMenuVisibleId = null
    },

    // 处理菜单动作
    handleAction(action, device) {
      this.actionMenuVisibleId = null
      if (action === 'delete') {
        this.confirmAndDelete(device)
      } else if (action === 'repair') {
        uni.navigateTo({ url: `/pages/work/equipment/repair?id=${device.id}` })
      } else if (action === 'edit') {
        this.editDevice(device)
      } else if (action === 'transfer') {
        uni.navigateTo({ url: `/pages/work/equipment/transfer?id=${device.id}` })
      } else if (action === 'detail') {
        uni.navigateTo({ url: `/pages/work/equipment/detail?id=${device.id}` })
      }
    },

    // 获取设备类型文本
    getTypeText(typeId) {
      // 使用 typeOptions 数组匹配设备类型ID对应的标签
      const typeValue = typeId === null || typeId === undefined ? '' : String(typeId)
      const options = Array.isArray(this.typeOptions) ? this.typeOptions : []
      const match = options.find(opt => String(opt.value) === typeValue)
      return match ? match.label : '未知类型'
    },

    // 获取状态文本
    getStatusText(status) {
      // 使用 equipment_status 字典返回的数据匹配传回的状态值
      const statusValue = status === null || status === undefined ? '' : String(status)
      const options = Array.isArray(this.statusOptions) ? this.statusOptions : []
      const match = options.find(opt => String(opt.value) === statusValue)
      return match ? match.label : '未知'
    },



    // 分页跳转
    goToPage(page) {
      if (page < 1 || page > this.totalPages || page === this.pageNum) {
        return
      }
      this.pageNum = page
      this.fetchEquipmentList()
    },

    getPageNumbers() {
      const totalPages = Math.ceil(this.total / this.pageSize)
      const currentPage = this.pageNum
      const pages = []

      if (totalPages <= 7) {
        // 总页数少于等于7页，显示所有页码
        for (let i = 1; i <= totalPages; i++) {
          pages.push(i)
        }
      } else {
        // 总页数大于7页，显示省略号
        if (currentPage <= 4) {
          // 当前页在前4页
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(totalPages)
        } else if (currentPage >= totalPages - 3) {
          // 当前页在后4页
          pages.push(1)
          pages.push('...')
          for (let i = totalPages - 4; i <= totalPages; i++) {
            pages.push(i)
          }
        } else {
          // 当前页在中间
          pages.push(1)
          pages.push('...')
          for (let i = currentPage - 1; i <= currentPage + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(totalPages)
        }
      }

      return pages
    },

    // 格式化时间
    formatTime(time) {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / 60000)

      if (minutes < 1) {
        return '刚刚'
      } else if (minutes < 60) {
        return `${minutes}分钟前`
      } else {
        const hours = Math.floor(minutes / 60)
        return `${hours}小时前`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.equipment-container {
  padding: 20rpx;
}

// 统计卡片样式
.stats-section {
  margin-bottom: 20rpx;
}

.stats-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stats-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.stats-row:last-child {
  margin-bottom: 0;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.stats-number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;

  // 不同状态的颜色
  &.total {
    color: #007AFF; // 蓝色 - 总设备数
  }

  &.online {
    color: #34C759; // 绿色 - 在线设备
  }

  &.offline {
    color: #8E8E93; // 灰色 - 闲置设备
  }

  &.alarm {
    color: #FF3B30; // 红色 - 待检修设备
  }

  &.pending {
    color: #FF9500; // 橙色 - 待报废设备
  }

  &.scrapped {
    color: #5856D6; // 紫色 - 已报废设备
  }

  &.repairing {
    color: #FF2D92; // 粉色 - 维修中设备
  }
}

.stats-label {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

// 搜索筛选样式
.search-section {
  background: #fff;
  // border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10rpx;
  margin-right: -10rpx;
  margin-bottom: 6rpx;
}

.search-item {
  width: 50%;
  box-sizing: border-box;
  padding: 10rpx;
  display: flex;
  flex-direction: column;
}

.search-item.full {
  width: 100%;
}

.search-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}


.picker-display {
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 16rpx;
  font-size: 26rpx;
  color: #333;
  border: 1rpx solid #eee;
}

.search-input {
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 16rpx;
  font-size: 26rpx;
  border: 1rpx solid #eee;
}

.search-input.inner {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0 12rpx;
}

.location-input {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 10rpx 12rpx;
}

.location-input.focused {
  border-color: #007AFF;
  background: #fff;
}

// 通用输入容器（名称/编号）
.input-with-icon {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 10rpx 12rpx;
}

.input-with-icon.focused {
  border-color: #007AFF;
  background: #fff;
}

.placeholder {
  color: #aaa;
}

.search-actions {
  // display: flex;
  // justify-content: flex-end;
  // align-items: center;
  gap: 20rpx;
  margin-top: 16rpx;
  // border: 1rpx solid red;
}

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
  border-radius: 14rpx;
  background: #f0f0f0;
  color: #333;
  min-width: 200rpx;
}

.search-btn.primary {
  background: #007AFF;
  color: #fff;
}

.search-btn.add {
  background: #34C759;
  color: #fff;
}

.search-btn:active {
  opacity: 0.85;
}

// 网格样式
.grid-body {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
  color: #333;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  transition: background-color 0.3s;
}

.grid-item-box:active {
  background-color: #f0f0f0;
}

// 快速操作样式
.quick-actions {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: background-color 0.3s;
}

.action-item:active {
  background-color: #f0f0f0;
}

.action-text {
  font-size: 24rpx;
  color: #333;
  margin-top: 8rpx;
}

// 设备列表样式
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0 20rpx;
}

.total-display {
  display: flex;
  align-items: center;
}

.total-text {
  font-size: 26rpx;
  color: #007AFF;
  font-weight: 600;
  background: #E8F4FF;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
}

.equipment-list {
  // border: 1rpx solid red;
  // margin-top: 10rpx;
  background: #fff;
  // border-radius: 16rpx;
  padding: 20rpx;
}

.device-item {
  display: flex;
  align-items: flex-start;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  gap: 20rpx;
}

.device-item:last-child {
  border-bottom: none;
}

// 左侧设备图标
.device-icon {
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8rpx;
}

// 右侧设备信息容器
.device-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  position: relative; // 作为弹出菜单定位参照
}

// 设备信息行
.device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40rpx;
}

// 设备名称
.device-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  flex: 1;
}

// 设备状态
.device-status {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;

  // 新的基于数值的颜色类
  &.status-green {
    color: #34C759;
    background-color: #E8F5E8;
  }

  &.status-blue {
    color: #007AFF;
    background-color: #E8F0FF;
  }

  &.status-orange {
    color: #FF9500;
    background-color: #FFF4E6;
  }

  &.status-red {
    color: #FF3B30;
    background-color: #FFE8E8;
  }

  &.status-unknown {
    color: #8E8E93;
    background-color: #F0F0F0;
  }
}

// 设备类型
.device-type {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

// 设备编号
.device-code {
  font-size: 26rpx;
  color: #666;
  font-family: 'Courier New', monospace;
}

// 设备型号
.device-model {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

// 设备位置
.device-location {
  font-size: 26rpx;
  color: #999;
}

// 操作按钮容器
.device-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16rpx;
  margin-top: auto; // 推到底部
  align-self: flex-end; // 贴右侧
}

// 更多图标样式
.more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

// 弹出菜单容器（定位在卡片右上方）
.action-menu {
  position: absolute;
  right: 200rpx;
  top: -110rpx;
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
  z-index: 1001;
  overflow: hidden;
}

.action-menu-item {
  padding: 18rpx 28rpx;
  font-size: 26rpx;
  color: #333;
}

.action-menu-item+.action-menu-item {
  border-top: 1rpx solid #f2f2f2;
}

.action-menu-item:active {
  background: #f7f7f7;
}

// 操作按钮
.action-btn {
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  border-radius: 20rpx;
  border: none;
  font-weight: 500;
  min-width: 120rpx;
}

.action-btn.primary {
  background-color: #007AFF;
  color: #fff;
}

.action-btn.secondary {
  background-color: #f0f0f0;
  color: #666;
}

.action-btn:active {
  opacity: 0.8;
}


.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 分页样式 */
.pagination-container {
  margin-top: 30rpx;
  padding: 20rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.pagination-info {
  text-align: center;
  margin-bottom: 20rpx;
}

.pagination-text {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.pagination-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10rpx 0;
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 12rpx 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: 2rpx solid #e1e5e9;
  background: #fff;
  color: #333;
  border-radius: 8rpx;
  min-width: 100rpx;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  white-space: nowrap;
}

.page-btn:not(.disabled):active {
  background: #f8f9fa;
  border-color: #007AFF;
  color: #007AFF;
  transform: translateY(1rpx);
  box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.page-btn.disabled {
  color: #c8c9cc;
  border-color: #f2f3f5;
  background: #fafbfc;
  box-shadow: none;
}

.page-numbers {
  display: flex;
  gap: 6rpx;
  align-items: center;
  margin: 0 12rpx;
  flex-shrink: 0;
}

.page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: 2rpx solid #e1e5e9;
  background: #fff;
  color: #333;
  border-radius: 8rpx;
  min-width: 50rpx;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.page-number:not(.ellipsis):not(.active):active {
  background: #f8f9fa;
  border-color: #007AFF;
  color: #007AFF;
  transform: translateY(1rpx);
  box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.page-number.active {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  color: #fff;
  border-color: #007AFF;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  transform: translateY(-1rpx);
}

.page-number.ellipsis {
  border: none;
  background: transparent;
  color: #999;
  cursor: default;
  box-shadow: none;
  font-weight: 400;
  padding: 12rpx 8rpx;
  min-width: auto;
}

/* 响应式设计 - 确保一行显示 */
@media (max-width: 750rpx) {
  .pagination-buttons {
    gap: 6rpx;
    padding: 8rpx 0;
  }

  .page-btn {
    padding: 10rpx 12rpx;
    font-size: 22rpx;
    min-width: 80rpx;
    gap: 4rpx;
  }

  .page-number {
    padding: 10rpx 12rpx;
    font-size: 22rpx;
    min-width: 40rpx;
  }

  .page-numbers {
    margin: 0 8rpx;
    gap: 4rpx;
  }

  .pagination-text {
    font-size: 22rpx;
  }
}

/* 超小屏幕优化 */
@media (max-width: 600rpx) {
  .pagination-buttons {
    gap: 4rpx;
  }

  .page-btn {
    padding: 8rpx 10rpx;
    font-size: 20rpx;
    min-width: 70rpx;
  }

  .page-number {
    padding: 8rpx 10rpx;
    font-size: 20rpx;
    min-width: 35rpx;
  }

  .page-numbers {
    margin: 0 6rpx;
    gap: 3rpx;
  }
}

// 打开菜单时用于捕获空白点击的透明遮罩
.action-menu-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1000;
}
</style>
